<template>
	<view style="height: 100%;">
		<view class="fixed fixed-top bg-naver h z-99999">
			<view class="map-tab-box">
				<cx-navTitle :tabs="tabs" :activeItem="activeItem" @tabClick="tabClick"></cx-navTitle> 
			</view>
		</view>
		<view style="width:100%;height: calc(100% - 90upx);position: absolute;top: 90upx">
			<menghnMap 
			@regionchange="regionchange" 
			@markertaptap="markertaptap"
			:markers="markers" 
			:latitude="latitude" 
			:longitude="longitude" 
			:showOper="showOper"
			/>
			<!--
			
			@navigation="navigation" 
			@tapMap="tapMap"
			-->
		</view>
	</view>
</template>


<script>
	import cxNavTitle from '@/components/cx-navTitle/cx-navTitle.vue' 
	import menghnMap from '@/components/menghn-map/menghn-map'
export default {
	components: {
		menghnMap,
		cxNavTitle
	},
	data() {
		return {
			textContent:'达川招商局',
			latitude: '22.568887404083515',
			longitude: '113.88770606927332',
			scrollTimer: null,
			showOper:false,
			markers: [
				{
					distance: 0.05828283926096898,
					id: 27595,
					latitude: "22.568887404083515",
					longitude: "113.88770606927332",
					title: '玄妙的',
					iconPath: '../../static/icon-map-red.png',
					width: 30,
					height: 43,
				},
				{
					distance: 0.05828283926096898,
					id: 27595,
					latitude: "22.568382855230592",
					longitude: "113.8894362439249",
					title: '玄妙的',
					iconPath: '../../static/icon-map-red.png',
					width: 30,
					height: 43,
				}
			],
			activeItem: "tabOne",
			tabTitle:"",
			tabs: [
			  {
			    name: "tabOne",
			    label: "全部",
			  },
			  {
			    name: "tabTwo",
			    label: "丘区农机类",
			  },
			  {
			    name: "tabThree",
			    label: "农业和食品保健类",
			  },
				{
				  name: "tabFour",
				  label: "康养文旅类",
				},
				{
				  name: "tabFive",
				  label: "生态工业类",
				},
				{
				  name: "tabSex",
				  label: "现代服务业类",
				}
			],
		}
	},
	onLoad() {

	},
	methods: {
		tabClick(e){ //点击获取当前标签数据 
			console.log('你点击了【'+e.label+'】的选项卡标签',e)
			this.activeItem = e.name;//当前class类名 
			this.tabTitle = e.label; //当前选的标签名
		},
		regionchange(e) {//移动地图触发
			if (this.scrollTimer != null) {//节流
				clearTimeout(this.scrollTimer);
			}
			this.scrollTimer = setTimeout(() => {
				if (e.type == 'end' && e.causedBy == 'drag') {
				// console.log('地图移动了');
				}
			}, 500)
		},
		// navigation(e) {
		// 	console.log('navigation');
		// },
		markertaptap(e) {
			uni.navigateTo({
				url:'/pages/project/company?company='+e
			})
			// console.log('markertaptap');
			console.log(e);
		},
		// tapMap(e) {//点击地图触发
		// 	this.showOper = !this.showOper;
		// 	console.log('tapMap');
		// }
	}
}
</script>

<style>
</style>
